<template>
  <div class="tree-box">
    vue-d3-tree
    <!-- 
      layoutType - 'circular' 'vertical' or 'horizontal'
      linkLayout - 'bezier' or 'orthogonal' 曲线 or 直线
    -->
    <div class="vue-d3-tree" :style="{height: treeHeight + 'px'}">
      <tree 
        :data="treeDatab" 
        node-text="Company Name" 
        layoutType="horizontal"
        type="tree"
        linkLayout="bezier"
        :duration="500"
        :marginX="100"
        :marginY="4"
        :leafTextMargin="10" 
        :maxZoom="maxZoom"
        :radius="radius">
      </tree>
    </div>
    
  </div>
</template>
 
<script>
import { tree } from 'vued3tree'
import { filterNodeXX, getAllLastChild } from '@/utils/common'
export default {
  components: { tree },
  props: {
    treeDatab: {
      type: Object,
      default: {}
    },
    maxZoom: {
      type: Number,
      default: 0.8
    },
    minZoom: {
      type: Number,
      default: 0.8
    },
    radius: {
      type: Number,
      default: 5
    }
  },
  data () {
    return {
      // treeHeight: 300,
      // treeData: {
      //   name: '中国',
      //   children: [
      //     {
      //       name: '北京',
      //       children: [
      //         {
      //           name: '海淀',
      //           children: [
      //             {name: '香山'}
      //           ]
      //         }, 
      //         {name: '朝阳'},
      //         {name: '丰台'}
      //       ]
      //     },{
      //       name: '河北',
      //       children: [
      //         {name: '石家庄'}, 
      //         {name: '正定'},
      //       ]
      //     }, {
      //       name: '上海'
      //     }
      //   ]
      // }
    }
  },
  computed: {
    treeHeight() {
      let s = getAllLastChild(this.treeDatab.children)
      console.log(s)
      return s.length * 20
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      let s = filterNodeXX(this.treeDatab.children)
      // console.log(s)      
    }
  }
}
</script>
 
<style scoped lang="scss">
  .vue-d3-tree{
    width: 700px;
    // height: 600px;
    background: #eef;
  }
</style>